<style lang="less">
  #excellent-route-service-config-dialog {
    .f-w20 {
      width: 20%;
    }
  }
</style>

<template>
  <div id="excellent-route-service-config-dialog">
    <el-dialog title="配置服务" :visible.sync="isShow" width="60%" @close="closedDialog">
      <el-tabs type="border-card" v-loading="isLoading">
        <el-tab-pane label="时效必达">
          <el-form ref="timelinessform" :model="timelinessform" label-width="110px">
            <el-form-item label="时效申请周期:"
                          :rules=" { required: true,type:'array', message: '请输入时效申请周期', trigger: 'change' }">
              <label>订单签收后 </label>
              <el-input v-model="timelinessform.timelinessCompensateDays" type="number" class="f-w20" :disabled="isView"></el-input>
              <label>天以内</label>
            </el-form-item>
            <el-form-item label="时效补偿类型:"
                          :rules=" { required: true,type:'array', message: '请选择时效补偿类型', trigger: 'change' }">
              <el-radio-group v-model="timelinessform.timelinessCompensateType" :disabled="isView"
                              @change="timelinessCompensateTypeChange">
                <el-radio :label="109015001">补偿订单金额</el-radio>
                <el-radio :label="109015002">补偿干线运费</el-radio>
                <el-radio :label="109015003">每票固定金额</el-radio>
                <el-radio :label="109015004">其他</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="" label-width="90px"
                          :rules=" { required: true,type:'array', message: '请输入补偿金额比例', trigger: 'change' }"
                          v-if="timelinessform.timelinessCompensateType==109015001">
              <label>
                补偿金额比例:
                <el-input v-model="timelinessform.timelinessCompensateValue" style="width: 150px" :disabled="isView">
                  <template slot="append">%</template>
                </el-input>
              </label>
            </el-form-item>
            <el-form-item label="" label-width="90px"
                          :rules=" { required: true,type:'array', message: '请输入补偿干线运费', trigger: 'change' }"
                          v-if="timelinessform.timelinessCompensateType==109015002">
              <label>
                补偿干线运费:
                <el-input v-model="timelinessform.timelinessCompensateValue" style="width: 150px" :disabled="isView">
                  <template slot="append">%</template>
                </el-input>
              </label>
            </el-form-item>
            <el-form-item label="" label-width="90px"
                          :rules=" { required: true,type:'array', message: '请输入每票固定金额', trigger: 'change' }"
                          v-if="timelinessform.timelinessCompensateType==109015003">
              <label>
                每票固定金额:
                <el-input type="number" v-model="timelinessform.timelinessCompensateValue" :disabled="isView"
                          style="width: 150px">
                  <template slot="append">元</template>
                </el-input>
              </label>
            </el-form-item>
            <el-form-item label="状态" label-width="90px" :rules=" { required: true,type:'array', message: '请选择启用/禁用', trigger: 'change' }">
              <el-radio-group v-model="timelinessform.status" :disabled="isView">
                <el-radio :label="111002001">启用</el-radio>
                <el-radio :label="111002002">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin-left: 5px;" @click="saveServiceClick('timeliness')" :disabled="isView">保存
          </el-button>
        </el-tab-pane>
        <el-tab-pane label="先行理赔">
          <el-form ref="claimSettlementform" :model="claimSettlementform" label-width="110px">
            <el-form-item label="状态" label-width="90px" :rules=" { required: true,type:'array', message: '请选择启用/禁用', trigger: 'change' }">
              <el-radio-group v-model="claimSettlementform.status" :disabled="isView" >
                <el-radio :label="111002001">启用</el-radio>
                <el-radio :label="111002002">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin-left: 5px;" @click="saveServiceClick('claim_settlement')" :disabled="isView">保存
          </el-button>
        </el-tab-pane>
        <el-tab-pane label="专属客服">
          <el-form ref="exclusiveServiceform" :model="exclusiveServiceform" label-width="110px">
            <el-form-item label="客服联系人" label-width="110px"
                          :rules=" { required: true,type:'array', message: '请输入客服联系人', trigger: 'change' }">
              <el-input v-model="exclusiveServiceform.customerServiceName" style="width: 150px" :disabled="isView"></el-input>
            </el-form-item>
            <el-form-item label="客服电话" label-width="110px"
                          :rules=" { required: true,type:'array', message: '请输入客服电话', trigger: 'change' }">
              <el-input v-model="exclusiveServiceform.customerServicePhone" style="width: 150px" :disabled="isView"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="90px" :rules=" { required: true,type:'array', message: '请选择启用/禁用', trigger: 'change' }">
              <el-radio-group v-model="exclusiveServiceform.status" :disabled="isView" >
                <el-radio :label="111002001">启用</el-radio>
                <el-radio :label="111002002">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin-left: 5px;" @click="saveServiceClick('exclusive_service')" :disabled="isView">保存
          </el-button>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveExcellentRouteServiceDetail,
  searchExcellentRouteServiceDetail
} from '../../../api/stowage/ExcellentRoute.js';
import { searchInfoList } from '../../../api/stowage/ExcellentRouteServicePromise.js';
import { resetForm } from '../../../lib/util.js';

export default {
  name: 'ExcellentRouteServiceConfigDialog',
  props: {
    excellentRouteServiceConfigModel: {}
  },
  watch: {
    excellentRouteServiceConfigModel (val) {
      this.initSearchInfoList();
      let model = this.excellentRoute = JSON.parse(val);
      this.isShow = model.isShow;
      this.isView = model.isView;
      resetForm(this.$refs.timelinessform, this.timelinessform, this.timelinessform.excellentRouteServicePromiseType);
      resetForm(this.$refs.claimSettlementform, this.claimSettlementform, this.timelinessform.excellentRouteServicePromiseType);
      resetForm(this.$refs.exclusiveServiceform, this.exclusiveServiceform, this.timelinessform.excellentRouteServicePromiseType);
      this.timelinessform.excellentRouteServicePromiseType = 109014002;
      this.timelinessform.excellentRouteServicePromiseTypeName = '时效必达';
      this.timelinessform.timelinessCompensateType = 109015002;
      this.claimSettlementform.excellentRouteServicePromiseType = 109014003;
      this.claimSettlementform.excellentRouteServicePromiseTypeName = '先行理赔';
      this.exclusiveServiceform.excellentRouteServicePromiseType = 109014004;
      this.exclusiveServiceform.excellentRouteServicePromiseTypeName = '专属客服';
      searchExcellentRouteServiceDetail({
        filters: 'EQ_excellentRoute.id=' + model.id,
        sorts: '',
        page: 1,
        size: 15
      }).then((res) => {
        let list = res.data.detailModelList;
        for (let ersd in list) {
          if (list[ersd].excellentRouteServicePromiseType === 109014002) {
            this.timelinessform = list[ersd];
            this.defaultTimelinessCompensateValue = list[ersd].timelinessCompensateValue;
            this.defaultTimelinessCompensateType = list[ersd].timelinessCompensateType;
            continue;
          }
          if (list[ersd].excellentRouteServicePromiseType === 109014003) {
            this.claimSettlementform = list[ersd];
            continue;
          }
          if (list[ersd].excellentRouteServicePromiseType === 109014004) {
            this.exclusiveServiceform = list[ersd];
            continue;
          }
        }
        console.log(res);
      }).catch(function (error) {
        console.log(error);
      });
    }
  },
  data () {
    return {
      isView: false,
      isShow: false,
      isLoading: false,
      excellentRoute: null,
      excellentRouteServiceDetails: [],
      defaultTimelinessCompensateValue: null,
      defaultTimelinessCompensateType: null,
      timelinessform: {
        id: null,
        status: null,
        timelinessCompensateDays: null,
        timelinessCompensateType: 109015002,
        timelinessCompensateTypeName: null,
        timelinessCompensateValue: null,
        excellentRouteServicePromiseId: null,
        excellentRouteServicePromiseType: '109014002',
        excellentRouteServicePromiseTypeName: '时效必达',
        excellentRouteId: null
      },
      claimSettlementform: {
        id: null,
        status: null,
        excellentRouteServicePromiseId: null,
        excellentRouteServicePromiseType: '109014003',
        excellentRouteServicePromiseTypeName: '先行理赔',
        excellentRouteId: null
      },
      exclusiveServiceform: {
        id: null,
        status: null,
        customerServiceName: null,
        customerServicePhone: null,
        excellentRouteServicePromiseId: null,
        excellentRouteServicePromiseType: '109014004',
        excellentRouteServicePromiseTypeName: '专属客服',
        excellentRouteId: null
      }
    };
  },
  methods: {
    closedDialog () {
      this.$emit('isRefreshRoute', true);
    },
    saveServiceClick (type) {
      let model = null;
      if (type === 'timeliness') {
        model = Object.assign({}, this.timelinessform);
        if (!model.timelinessCompensateDays) {
          this.$message.error('请选择时效申请周期');
          return;
        }
        if (!model.timelinessCompensateType) {
          this.$message.error('请选择时效补偿类型');
          return;
        }
        if (model.timelinessCompensateType === 109015001) {
          if (!model.timelinessCompensateValue) {
            this.$message.error('请输入补偿订单金额比例');
            return;
          }
          model.timelinessCompensateTypeName = '补偿订单金额';
        }
        if (model.timelinessCompensateType === 109015002) {
          if (!model.timelinessCompensateValue) {
            this.$message.error('请输入补偿干线运费比例');
            return;
          }
          model.timelinessCompensateTypeName = '补偿干线运费';
        }
        if (model.timelinessCompensateType === 109015003) {
          if (!model.timelinessCompensateValue) {
            this.$message.error('请输入补偿每票固定金额');
            return;
          }
          model.timelinessCompensateTypeName = '每票固定金额';
        }
        if (model.timelinessCompensateType === 109015004) {
          model.timelinessCompensateTypeName = '其他';
        }
      }
      if (type === 'claim_settlement') {
        model = Object.assign({}, this.claimSettlementform);
      }
      if (type === 'exclusive_service') {
        model = Object.assign({}, this.exclusiveServiceform);
        if (!model.customerServiceName) {
          this.$message.error('请输入客服联系人');
          return;
        }
        if (!model.customerServicePhone) {
          this.$message.error('请输入客服电话');
          return;
        }
      }
      if (!model.status) {
        this.$message.error('请选择启用/禁用');
        return;
      }
      model.statusName = model.status === 111002001 ? '启用' : '禁用';
      model.excellentRouteId = this.excellentRoute.id;
      model.excellentRouteName = this.excellentRoute.name;
      saveExcellentRouteServiceDetail(model).then((res) => {
        console.log(res);
        this.$message.success('保存成功');
      }).catch(function (error) {
        console.log(error);
      });
    },
    timelinessCompensateTypeChange (val) {
      if (val === this.defaultTimelinessCompensateType) {
        this.timelinessform.timelinessCompensateValue = this.defaultTimelinessCompensateValue;
        return;
      }
      this.timelinessform.timelinessCompensateValue = null;
    },
    initSearchInfoList () {
      searchInfoList({
        filters: '',
        sorts: '',
        page: 1,
        size: 15
      }).then((res) => {
        let list = res.data.detailModelList;
        for (let ers in list) {
          if (list[ers].servicePromiseType === 109014002) {
            this.timelinessform.excellentRouteServicePromiseId = list[ers].id;
            continue;
          }
          if (list[ers].servicePromiseType === 109014003) {
            this.claimSettlementform.excellentRouteServicePromiseId = list[ers].id;
            continue;
          }
          if (list[ers].servicePromiseType === 109014004) {
            this.exclusiveServiceform.excellentRouteServicePromiseId = list[ers].id;
            continue;
          }
        }
      }).catch(function (error) {
        console.log(error);
      });
    }
  },
  mounted () {
  }
};
</script>
